<template>
	<div class="ele-body">
		<div style="padding: 0px;" class="">
			
				<el-row style="width: 100%;">
					
					
						<el-col :span="6" style="display: flex;">
							<span style="font-weight: 600;margin-right: 10px;width:80px;">ISBN/正题名/作者:</span><el-input clearable  v-model="keyword" placeholder="请输入ISBN/正题名/作者搜索" style="width: 260px;"></el-input>
						</el-col >
						<el-col :span="12" style="display: flex;align-items: center;">
							<span style="font-weight: 600;margin-right: 10px;width:80px;">	条形码:</span><el-input  clearable v-model="qishi" placeholder="请输入起始条形码" style="width: 200px;"></el-input><span style="margin: 0 10px;"> - </span> <el-input  clearable v-model="jiezhi" placeholder="请输入截止条形码" style="width: 200px;"></el-input>
						</el-col >
						
						
					
					<el-col :span="4">
							<el-button type="warning" @click="search">搜索</el-button>
					</el-col>
							
				</el-row>
				<el-row style="width: 100%;margin-top: 10px;">
					<el-col :span="6" style="display: flex;align-items: center;">
							<span style="font-weight: 600;margin-right: 10px;width:80px;">	入库日期:</span>
							<el-date-picker
							  v-model="search_timea"
							  type="daterange"
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							  value-format='yyyy-MM-dd'
							  format="yyyy-MM-dd"
							  @change="changec"
							  style="width: 260px;">
							</el-date-picker>
						</el-col >
				<!-- 		<el-col :span="4" style="display: flex;align-items: center;">
							<span style="font-weight: 600;margin-right: 10px;width:80px;">	图书状态:</span>
							 <el-select v-model="search_status" placeholder="请选择"  clearable style="width: 160px;">
									<el-option
									  v-for="item in zhuangtailist"
									  :key="item.key"
									  :label="item.value"
									  :value="item.key" >
									</el-option>
							  </el-select>
						</el-col > -->
						
					<el-col :span="4" style="display: flex;align-items: center;" v-if="UserInfo.collection_is_zong=='true'">
						<span style="font-weight: 600;margin-right: 10px;width:80px;">	馆藏地:</span>
						 <el-select v-model="search_collection_id" placeholder="请选择"  clearable style="width: 160px;">
							<el-option
							  v-for="item in guanlist"
							  :key="item.id"
							  :label="item.name"
							  :value="item.id"
							 
							  >
							</el-option>
						  </el-select>
					</el-col >
				</el-row>
		</div>
		<div class="top-btn">
			<div class="top-con">
			  <el-button type="success" icon="el-icon-check"  @click="print()"> 批量推荐</el-button>
			
			</div>
			<div class="top-con">
				
				<!-- <div style="height: 30px;">
					<el-button @click="drawer = true" type="primary"  circle icon="el-icon-s-operation" style="float:right;margin-right: 16px;">
					 </el-button>
				</div> -->
			</div>
		</div>
		
		<el-drawer
			:show-close="true"
			size="280px"
			title="表格字段"
		  :visible.sync="drawer">
		  <div>
			   <rightbiao :ziduanlist='ziduanlist' @xuanzebiao="xuanzebiao($event)"></rightbiao>
		  </div>
		</el-drawer>
		<div style="margin-top: 10px;" v-if="tableData.list">
			<el-table :data="tableData.list.data" stripe style="width: 100%" :header-cell-style="{'text-align':'center'}" 
					:cell-style="{'text-align':'center'}" border @selection-change="handleSelectionChange">
				  <el-table-column
				      type="selection"
				      width="44">
				    </el-table-column>
				<el-table-column v-for="item in tableData.fields" :key="item.name" :prop="item.name" :label="item.label" min-width="80"></el-table-column>
			<el-table-column label="操作" min-width="80">
				<template slot-scope="scope">
					<!-- <el-button type="success" @click="getson(scope.row)">下级</el-button> -->
					<el-button type="primary" @click="printa(scope.row)">推荐</el-button>
					
					
					
				</template>
			</el-table-column>
			</el-table>
		</div>
		<div class="block" style="margin-top: 18px;">
		    <el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				:page-sizes="[10]"
				:page-size="10"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
		    </el-pagination>
		</div>
	
	</div>
</template>

<script>
	import rightbiao from'@/components/rightbiao/rightbiao'
	export default{
		components:{
			rightbiao
		},
		props:['gengxin'],
		data(){
				return{
					UserInfo:{},
					value1:'',
					table_name:'',
					visiblea:false,
					formLabelWidth: '120px',
					form:{
					},
					dialogVisible:false,
					ziduanlist:'',
					drawer:false,
					page: 1,
					total:0,
					tableData: [],
					search_barcode:'',
					search_collection_id:'',
					keyword:'',
					search_time:'',
					search_timea:'',
					search_status:'',
					zhuangtailist:'',
					guanlist:[],
					qishi:'',
					jiezhi:'',
					yulanlist:'',
					dayinleixing:[
						{
							id:'0',
							name:'默认'
						},
						{
							id:'1',
							name:'样式一'
						},
					],
					multipleSelection:[]
					
				}
			},
			watch:{
				gengxin(newval,oldval){
					console.log('你好啊我改变了',newval,oldval)
					this.getlist()
				}
			},
			mounted() {
			
				this.getlist();
				this.getguan()
				this.getzhuangtai()
				this.getmsg()
				// this.getpaylist();
			},
			methods: {
				 handleSelectionChange(val) {
				        this.multipleSelection = val;
						console.log('这是选中的列', this.multipleSelection)
				},
				changea(e){
					this.getyulan(e)
				},
				add() {
					this.form={}
					this.getshezhi()
					this.dialogVisible = true;
				},
				getshezhi(){
					this.$http.get('/back/booklabel/list').then((res) => {
						this.form = res.data.data;
						this.getyulan(this.form.label_type)
					});
				},
				getmsg() {
					this.$http.get('/back/profile/getUserInfo').then((res) => {
						this.UserInfo = res.data.data;
						console.log('1231',this.UserInfo)
					});
				},
				getyulan(type){
					this.$http.get(`/back/booklabel/preview?label_type=${type}`).then((res) => {
						this.yulanlist = res.data.data.preview;
						console.log('1231',this.UserInfo)
					});
				},
				getzhuangtai(){
					this.$http.get('/back/data/bookTypeList'
					 ).then(res => {
						if (res.data.code === 1) {
							this.zhuangtailist= res.data.data
							console.log('状态',this.zhuangtailist)
						} else {
							this.$message.error(res.data.msg || '获取数据失败');
						}
					})
				},
				getguan(){
					this.$http.get('/back/data/collectionList'
					 ).then(res => {
						if (res.data.code === 1) {
							this.guanlist= res.data.data
							console.log('馆藏',this.guanlist)
						} else {
							this.$message.error(res.data.msg || '获取数据失败');
						}
					})
				},
			
				changec(e){
					console.log('这是选中的时间',e,)
					if(e){
						this.search_time=e[0]+','+e[1]
					}else{
						this.search_time=''
					}
					
				
				},
				printa(row){
					let a={
						ids:[row.id]
					}
					this.$http.post('/back/book_recommend/tuijian',a).then((res) => {
						if (res.data.code == 1) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.getlist();
							this.$emit('guanbia','')
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},
				print(){
					let a={
						ids:[]
					}
					console.log(1213132131321)
					if(this.multipleSelection.length>=1){
						for(let item of this.multipleSelection){
							a.ids.push(item.id)
						}
					}
					console.log(a)
					this.$http.post('/back/book_recommend/tuijian',a).then((res) => {
						if (res.data.code == 1) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.getlist();
							this.$emit('guanbi','')
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},
				changed(e){
					this.status=e
				},
				deepCopy(newobj, oldobj) {
					let that =this
				            // 遍历oldobj的属性名
					for (var k in oldobj) {
						// 判断属性属于哪种数据类型
						// 1.获取属性值 oldobj[k]
						var item = oldobj[k];
						// 2.判断是否属于数组(因为数组也属于对象，所以必须先判断数组)
						if (item instanceof Array) {
							newobj[k] = []; // (1)先给newobj添加一个属性k，同oldobj里的k
							that.deepCopy(newobj[k], item) // (2)再用oldobj[k]赋值给newobj[k]
						} else if (item instanceof Object) {
							// 3.判断是否属于对象
							newobj[k] = {};
							that.deepCopy(newobj[k], item)
						} else {
							// 4.属于简单数据类型
							newobj[k] = item
						}
		 
					}
				},
				xuanzebiao(list){
					let a =[]
					this.deepCopy(a,list)
					for(let item of a){
						if(item.status==true){
							item.status='true'
						}else{
							item.status='false'
						}
					}
					
					this.$http.post('/back/Fieldset/edit',{list:a}).then((res) => {
						if(res.data.code==1){
							this.page = 1;
							this.getlist();
							this.drawer=false
						}
					});
				},
				tojilu(){
					this.$router.push({
					    path: '/bookmgt/bookdownmsg',
					  });
				},
				
				getziduanlist(){
					this.$http.get(`/back/Fieldset/list?tb_name=${this.table_name}`).then((res) => {
						this.ziduanlist = res.data.data;
						console.log('这是字段列表',this.ziduanlist)
					});
				},
				//查询条件
				search() {
					this.page = 1;
					if(this.qishi!=='' && this.jiezhi!==''){
						this.search_barcode=this.qishi+','+this.jiezhi
					}else{
						this.search_barcode=''
					}
					this.getlist();
				},
				submit(){
					let a =this.form
					this.$http.post('/back/booklabel/edit',a).then((res) => {
						if (res.data.code == 1) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.getlist();
							this.dialogVisible=false;
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},
				//获取列表
				getlist() {
					this.$http.get(`/back/Book/list?page=${this.page }&size=10&search_barcode=${this.search_barcode}&search_time=${this.search_time}&keyword=${this.keyword}&search_collection_id=${this.search_collection_id}`
					 ).then(res => {
						if (res.data.code === 1) {
							this.tableData = res.data.data;
							console.log('1212',this.tableData)
							this.total = this.tableData.list.total;
							this.table_name=res.data.data.table_name
							this.getziduanlist()
						} else {
							this.$message.error(res.data.msg || '获取数据失败');
						}
					})
				},
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
					this.page=val;
					this.getlist();
				},
			},
		
	}
</script>

<style lang="scss">
	.daohang{
		padding:10px 0;
		display: flex;
		align-items: center;
		color:black;
		.title{
			font-size: 16px;
			font-weight: bold;
		}
		
	}
	.top-btn{
		padding:20px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.top-con{
			display: flex;
			align-items: center;
			.con-item{
				margin-right: 10px;
			}
		}
		
	}
	.top-con{
		display: flex;
		align-items: center;
		.con-item{
			margin-right: 10px;
		}
	}
</style>